<template>
  <el-dialog
    class="boundDialog"
    v-model="props.boundDialog"
    :title="props.boundForm?.boundTitle"
    width="35%"
    :show-close="false"
  >
    <el-row class="row">
      <el-col :span="8">
        <div>备件名称：{{ props.detailForm?.partName }}</div>
      </el-col>
      <el-col :span="8">
        <div>备件类型：{{ props.detailForm?.partTypeName }}</div>
      </el-col>
      <!-- <el-col :span="8">
                <div>当前可用库存：{{ props.detailForm?.availableStock }}</div>
            </el-col> -->
    </el-row>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item
        label="出库类型"
        prop="retrievalType"
        style="width: 90%"
        :rules="{
          required: true,
          message: '请选择出库类型',
          trigger: 'change'
        }"
      >
        <el-cascader
          v-model="ruleForm.retrievalType"
          ref="retrievalRef"
          :props="retrievalProps"
          :options="retrievalTypes"
          clearable
          placeholder="请选择出库类型"
          style="width: 100%"
          filterable
          :show-all-levels="false"
        />
      </el-form-item>
      <el-form-item v-for="(item, index) in ruleForm.detailRequests">
        <el-row>
          <el-col :span="11">
            <el-form-item
              label="出库批次"
              :prop="`detailRequests[${index}].batchId`"
              :rules="{
                required: true,
                message: '请选择出库批次',
                trigger: 'change'
              }"
            >
              <el-select
                v-model="item.batchId"
                class="m-2"
                placeholder="选择出库批次"
                @change="outChange(item.batchId, index)"
              >
                <el-option
                  v-for="item in props.boundForm?.outBatch"
                  :key="item.id"
                  :label="item.batchNum + '-' + item.expireDate"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="出库数量"
              :prop="`detailRequests[${index}].amount`"
              :rules="{
                required: true,
                message: '请输入出库数量',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="item.amount"
                autocomplete="off"
                placeholder="请输入出库数量"
                type="number"
                min="0"
                @input="amountInput(item.amount, index)"
              />
            </el-form-item>
            <div
              style="margin-left: 12px; margin-top: 5px"
              v-if="item.batchId != ''"
            >
              库存数量：{{ item.stockAmount }}
            </div>
          </el-col>
          <el-col :span="2" v-if="ruleForm.detailRequests.length > 1">
            <svg
              @click="del(item)"
              t="1677136520546"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3250"
              width="20"
              height="32"
            >
              <path
                d="M832 977.066667h8.533333s4.266667 0 8.533334-4.266667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266666-4.266667 4.266667-4.266667c0-4.266667 0-4.266667 4.266667-8.533333s0-4.266667 0-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666-4.266667 0-4.266667-4.266667-4.266667-4.266667s-4.266667-4.266667-8.533333-4.266667H183.466667h-8.533334c0 4.266667 0 4.266667-4.266666 8.533334-4.266667 0-4.266667 4.266667-4.266667 4.266666l-4.266667 4.266667s-4.266667 4.266667-4.266666 8.533333V960l4.266666 4.266667c0 4.266667 4.266667 4.266667 4.266667 4.266666l4.266667 4.266667s4.266667 4.266667 8.533333 4.266667 4.266667 0 8.533333 4.266666h644.266667zM230.4 900.266667V251.733333h563.2v648.533334H230.4z"
                fill="#FA4016"
                p-id="3251"
              ></path>
              <path
                d="M388.266667 704v17.066667c0 4.266667 4.266667 4.266667 4.266666 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266667 4.266666 4.266667 0 4.266667 4.266667 8.533333 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533334-4.266667 4.266667 0 4.266667-4.266667 4.266666-4.266666l4.266667-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-34.133333c-4.266667 0-4.266667 4.266667-8.533333 4.266666l-4.266667 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666 8.533333v294.4zM631.466667 721.066667v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-8.533333-21.333333c-4.266667 0-4.266667 4.266667-8.533334 4.266666l-4.266666 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 8.533333V721.066667c0 4.266667 4.266667 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266666 4.266667 0 4.266667 4.266667 8.533334 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266667-4.266667v-8.533333zM46.933333 221.866667v8.533333c0 4.266667 0 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266667s4.266667 4.266667 8.533334 4.266666 4.266667 0 8.533333 4.266667h870.4c4.266667 0 4.266667 0 8.533333-4.266667l4.266667-4.266666c4.266667 0 4.266667-4.266667 4.266667-4.266667l4.266666-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333s0-4.266667 4.266667-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666l-4.266667-4.266667-4.266667-4.266667H68.266667c-4.266667 0-4.266667 4.266667-8.533334 4.266667s0 4.266667 0 8.533333l-4.266666 4.266667s-4.266667 4.266667-4.266667 8.533333v17.066667c-4.266667 0-4.266667 0-4.266667 4.266667z"
                fill="#FA4016"
                p-id="3252"
              ></path>
              <path
                d="M384 59.733333c-4.266667 0-4.266667 4.266667-8.533333 8.533334l-68.266667 128s-4.266667 4.266667-4.266667 8.533333v21.333333c0 4.266667 0 4.266667 4.266667 8.533334l4.266667 4.266666c0 4.266667 4.266667 4.266667 4.266666 4.266667l4.266667 4.266667c4.266667 4.266667 12.8 4.266667 17.066667 4.266666h349.866666c4.266667 0 4.266667 0 8.533334-4.266666 4.266667 0 4.266667-4.266667 4.266666-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 0-4.266667 4.266667-4.266667 4.266667-4.266666 0-4.266667 4.266667-4.266667 4.266666-8.533334 0 0 0-4.266667 4.266667-8.533333v-8.533333c0-8.533333 0-12.8-4.266667-17.066667l-68.266666-128c0-4.266667-4.266667-4.266667-4.266667-8.533333l-8.533333-8.533334c-4.266667 0-4.266667-4.266667-8.533334-4.266666h-213.333333c0 4.266667-4.266667 4.266667-8.533333 4.266666s-8.533333 0-8.533334 4.266667c-4.266667 4.266667-8.533333 4.266667-8.533333 8.533333z m51.2 64h157.866667l25.6 51.2h-213.333334l29.866667-51.2z"
                fill="#FA4016"
                p-id="3253"
              ></path>
            </svg>
          </el-col>
        </el-row>
      </el-form-item>
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-button type="primary" @click="add()">添加出库批次</el-button>
        </div>
        <div>
          <el-button @click="cancel(ruleFormRef)"> 取消 </el-button>
          <el-button
            type="primary"
            @click="submit(ruleFormRef)"
            :loading="loading"
            >确认</el-button
          >
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElTree, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { dictionaryList } from '/@/api/publicApi/index'
import { getBatchApi, savePartRetrievalApi } from '/@/api/spare/index'
import { verifiyNumberInteger } from '/@/utils/toolsValidate'
const props = defineProps({
  boundDialog: Boolean,
  boundForm: Object,
  detailForm: Object
})
const emit = defineEmits(['cancelOut', 'submitOut'])
const formSize = ref('default')
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const retrievalTypes = ref<any>([])
const retrievalProps = {
  expandTrigger: 'click' as const,
  value: 'configValue',
  label: 'configValue',
  emitPath: false
}
const ruleForm = ref({
  retrievalType: '',
  detailRequests: [
    {
      partId: '',
      batchId: '',
      amount: '',
      stockAmount: ''
    }
  ]
})
const rules = reactive<FormRules>({
  retrievalType: [
    { required: true, message: '请选择出库类型', trigger: 'change' }
  ]
})

const getOutType = () => {
  dictionaryList({ configType: 'retrieval_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      retrievalTypes.value = res.data
    }
  })
}

getOutType()
const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.value.detailRequests = [
    {
      partId: '',
      batchId: '',
      amount: '',
      stockAmount: ''
    }
  ]
  emit('cancelOut')
}
const submit = (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.detailRequests.forEach((i) => {
        i.partId = props.detailForm?.id
      })
      savePartRetrievalApi(ruleForm.value).then((res) => {
        if (res.code == 0) {
          ElMessage({
            type: 'success',
            message: '出库成功'
          })
          emit('submitOut')
        }
      })
      loading.value = false
    } else {
      loading.value = false
    }
  })
}

const add = () => {
  ruleForm.value.detailRequests.push({
    partId: '',
    batchId: '',
    amount: '',
    stockAmount: ''
  })
}

const del = (item: any) => {
  var index = ruleForm.value.detailRequests.indexOf(item)
  if (index !== -1) {
    ruleForm.value.detailRequests.splice(index, 1)
  }
}

const outChange = (val: any, index: any) => {
  props.boundForm?.outBatch.forEach((i: any) => {
    if (i.id == val) {
      ruleForm.value.detailRequests[index].stockAmount = i.stockAmount
    }
  })
}

const amountInput = (val: any, index: any) => {
  ruleForm.value.detailRequests[index].amount = verifiyNumberInteger(val)
}
</script>
<style scoped lang="scss">
.boundDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;

    > div {
      text-align: center;
    }
  }
}

.icon {
  display: flex;
  margin: auto 0px;
  cursor: pointer;
}
</style>
